<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <custom-form @submit="save" />
  </div>

  <script>
    // 父组件
    const app = Vue.createApp({
      setup() {
        const save = (email, password) => {
          console.log(email, password)
        }
        return { save }
      }
    })

    // 子组件
    app.component('custom-form', {
      emits: {
        // 没有验证
        click: null,
        
        // 验证 submit 事件
        submit: (email, password) => {
          if (email && password) {
            console.log('true')
            return true
          } else {
            // 为 false 控制台会触发警告
            console.log('Invalid submit event payload!')
            return false
          }
        }
      },
      setup(props, context) {
        const email = Vue.ref('132@qq.com')
        const password = Vue.ref('1111')
        
        const submitForm = () => {
          context.emit('submit', email.value, password.value)
        }
        return { 
          email, 
          password,
          submitForm
        }
      },
      
      template: `<button @click="submitForm()">点击</button>`
    })
    
    app.mount('#app')
  </script>
</body>
</html>